<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>角色添加</title>
		<link rel="stylesheet" type="text/css" th:href="@{/admin/layui/css/layui.css}"
			href="../../static/admin/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" th:href="@{/admin/css/admin.css}"
			href="../../static/admin/css/admin.css" />
	</head>
	<body>
		<form class="layui-form column-content-detail">
			<div class="layui-tab">
				<ul class="layui-tab-title">
					<li class="layui-this">角色信息</li>
					<!-- <li>备注</li> -->
				</ul>
				<div class="layui-tab-content">
					<!-- 登录账号 -->
					<div class="layui-tab-item layui-show">
						<div class="layui-form-item">
							<input type="text" id="hidden-val" style="color: red; border:none;display: none;"
								value="" readonly />
							<label class="layui-form-label">登录账号：</label>
							<div class="layui-input-block">
								<input type="text" name="account" required lay-verify="required"
									placeholder="(必填)请使用字母、数字,设置登录名,且不能只使用数字。" autocomplete="off"
									class="layui-input must-input" oninput="this.value=this.value.replace(/[\W]/g,'');">
							</div>
						</div>
						<!-- 登录密码 -->
						<div class="layui-tab-item layui-show">
							<div class="layui-form-item">
								<label class="layui-form-label">登录密码：</label>
								<div class="layui-input-block">
									<input type="password" name="password" required lay-verify="required"
										placeholder="(必填)请设置登录密码,只能使用字母、数字。" autocomplete="off"
										class="layui-input must-input password"
										oninput="this.value=this.value.replace(/[\W]/g,'');">
								</div>
							</div>
							<!-- 验证密码 -->
							<div class="layui-tab-item layui-show">
								<div class="layui-form-item">
									<label class="layui-form-label">确认密码：</label>
									<div class="layui-input-block">
										<input type="text" id="hidden-password"
											style="color: red; border:none;display: none;" value="两次输入的密码不一致!" readonly />
										<input type="password" name="password_confirm" required lay-verify="required"
											placeholder="(必填)请确认登录密码" autocomplete="off"
											class="layui-input must-input password"
											oninput="this.value=this.value.replace(/[\W]/g,'');">
									</div>
								</div>
								<!-- 老师姓名 -->
								<div class="layui-form-item">
									<label class="layui-form-label">角色姓名：</label>
									<div class="layui-input-block">
										<input type="text" id="hidden-name"
											style="color: red; border:none;display: none;" value="只能输入中文!" readonly />
										<input type="text" name="user_name" required lay-verify="required"
											placeholder="(必填)请输入角色的姓名,只能输入中文" autocomplete="off"
											class="layui-input must-input">
									</div>
								</div>
								<!-- 性别 -->
								<div class="layui-form-item">
									<label class="layui-form-label">选择性别：</label>
									<div class="layui-input-block">
										<select name="sex" lay-verify="required">
											<option value="">请选择学员性别</option>
											<option value="1" selected>男</option>
											<option value="2">女</option>
										</select>
									</div>
								</div>
								<!-- 电话号码 -->
								<div class="layui-form-item">
									<label class="layui-form-label">手机号码：</label>
									<div class="layui-input-block">
										<input type="text" id="hidden-phone"
											style="color: red; border:none;display: none;" value="" size="50" readonly />
										<input type="text" name="phone" placeholder="请输入角色的手机号码" autocomplete="off"
											class="layui-input">
									</div>
								</div>
								<!-- 角色权限 -->
								<div class="layui-form-item">
									<label class="layui-form-label">角色身份：</label>
									<div class="layui-input-block">
										<input type="radio" name="identity" value="2" title="管理员" checked>
										<input type="radio" name="identity" value="1" title="超级管理员">
									</div>
								</div>
								<!-- 机构设置 -->
								<div class="layui-form-item">
									<label class="layui-form-label">机构设置：</label>
									<div class="layui-input-block">
										<input type="text" name="setup" required lay-verify="required"
											value="成都学辰教育科技有限公司" autocomplete="off" class="layui-input">
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-form-item" style="padding-left: 10px;">
					<div class="layui-input-block">
						<button class="layui-btn layui-btn-normal" lay-submit type="button">立即提交</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
		</form>
		<script src="../../static/admin/layui/layui.js" th:src="@{/admin/layui/layui.js}" type="text/javascript"
			charset="utf-8"></script>
		<script src="../../static/admin/js/common.js" th:src="@{/admin/js/common.js}" type="text/javascript"
			charset="utf-8"></script>
		<script src="../../static/admin/js/jquery.js" th:src="@{/admin/js/jquery.js}" type="text/javascript"
			charset="utf-8"></script>
		<script src="../../static/admin/js/jquery.min.js" th:src="@{/admin/js/jquery.min.js}" type="text/javascript"
			charset="utf-8"></script>
		<script>
			// 公共验证
			$(".must-input").blur(function() {
				let thisval = $(this).val();
				if (thisval == null || thisval == "") {
					$(this).css("border-color", "#F00");
					$(this).attr("placeholder", "该项不能为空！！");
				} else {
					$(this).css("border-color", "#D2D2D2");
				}
			});
			//用户名验证
			$("input[name='account']").blur(function() {
				$("#hidden-val").hide();
				let account = $(this).val();
				if(account != null && account != "" && account != undefined){
					
					if (!isNaN(account)) {
						$("#hidden-val").val("");
						$("#hidden-val").val("用户名不能全为数字")
						$("#hidden-val").show();
					} else {
						$("#hidden-val").hide();
						let params = {
							account: account
						}
						$.get("/teacher-checkUser", params, function(data) {
							if (data.status == 201) {
								$("#hidden-val").val("");
								$("#hidden-val").val("账号名重复!")
								$("#hidden-val").show();
							}
						}, "JSON");
					}
				}
			
			});

			//姓名验证
			$("input[name='user_name']").blur(function() {
				let user_name = $(this).val();
				if (user_name != null && user_name != "" && user_name != undefined) {
					if (!/^[\u4E00-\u9FA5]+$/.test(user_name)) {
						$(this).css("border-color", "#F00");
						$(this).val("")
						$("#hidden-name").show();
					} else {
						$("#hidden-name").hide();
					}
				}
			});

			//密码验证
			$("input[name='password']").blur(function() {
				let password = $("input[name='password']").val();
				let password_confirm = $("input[name='password_confirm']").val();
				if (password_confirm != "" && password_confirm != null && password_confirm != undefined) {
					if (password_confirm == password) {
						$("#hidden-password").hide();
						$(this).css("border-color", "#D2D2D2");
						$("input[name='password_confirm']").css("border-color", "#D2D2D2");
					} else {
						$(this).css("border-color", "#D2D2D2");
						$("#hidden-password").show();
						$(this).css("border-color", "#F00");
					}
				}
			});
			//密码验证2
			$("input[name='password_confirm']").blur(function() {
				let password = $("input[name='password']").val();
				let password_confirm = $("input[name='password_confirm']").val();
				if (password != password_confirm) {
					$("#hidden-password").show();
					$(this).css("border-color", "#F00");
				} else {
					if (password_confirm != null && password_confirm != "" && password_confirm != undefined) {
						$("#hidden-password").hide();
						$(this).css("border-color", "#D2D2D2");
						$("input[name='password']").css("border-color", "#D2D2D2");
					}
				}
			});
			//手机号验证 如果要输入手机号，就验证是否存在，是否为11
			$("input[name='phone']").blur(function() {
				let phone = $("input[name='phone']").val();
				if (phone != null && phone != "" && phone != undefined) {
					if (phone.length != 11) {
						$(this).css("border-color", "#F00");
						$("#hidden-phone").val("请输入11位手机号");
						$("#hidden-phone").show();
					} else {
						$(this).css("border-color", "#D2D2D2");
						$("#hidden-phone").val("");
						$("#hidden-phone").hide();

						let params = {
							phone: phone
						}
						$.get("/teacher-checkPhone", params, function(data) {
							if (data.status == 201) {
								$("#hidden-phone").val(data.msg + "“" + data.data.user_name + "” 使用！！");
								$("#hidden-phone").show();
							} else if (data.status == 200) {
								$("#hidden-phone").val("");
								$("#hidden-phone").hide();
							}
						});
					}
				} else {
					$(this).css("border-color", "#D2D2D2");
					$("#hidden-phone").val("");
					$("#hidden-phone").hide();
				}
			});

			//提交
			$(".layui-btn,.layui-btn-normal").on("click", function() {
				let account = $("input[name='account']").val();
				let user_name = $("input[name='user_name']").val();
				let sex = $("select[name='sex']").val();
				let phone = $("input[name='phone']").val();
				let identity = $("input[name='identity']:checked").val();
				let setup = $("input[name='setup']").val();
				let password = $("input[name='password']").val();
				let password_confirm = $("input[name='password_confirm']").val();
				
				let doadd = true;

				if(password == null || password == undefined || password == ""){
					doadd = false;
				}else if (password != password_confirm) {
					doadd = false;
				}

				if(account == null || account == undefined || account ==""){
					doadd = false;
				}else{
					if (!isNaN(account)) {
						doadd = false;
					}else{
						$.get("/teacher-checkUser", {account:account}, function(data) {
							if (data.status == 201) {
								doadd = false;
							}
						}, "JSON");
					}
				}
				
				if(user_name == null || user_name ==undefined || user_name == ""){
					doadd = false;
				}
				
				
				if(phone != null && phone != "" && phone != undefined){
					if(phone.length != 11){
						doadd = false;
					}else{
						$.get("/teacher-checkPhone", {phone:phone}, function(data) {
							if (data.status == 201) {
								doadd = false;
							}
						});
					}
				}
				
				if(doadd){
					let params = {
						account: account,
						user_name: user_name,
						password: password,
						sex: sex,
						phone: phone,
						identity: identity,
						setup: setup
					}

					var index = layer.load();
					$.post("/teacher-doAdd", params, function(data) {
						if(data.status ==200){
							alert("添加成功");
							const index = parent.layer.getFrameIndex(window.name);
							parent.layer.close(index);
							
							//伪动态更新
						}
					}, "JSON");
				}
				

			});
		</script>
		<script>
			layui.use(['form', 'jquery', 'laydate', 'layer', 'laypage', 'dialog', 'common', 'tool', 'element', 'upload',
				'layedit'
			], function() {
				var form = layui.form(),
					layer = layui.layer,
					$ = layui.jquery,
					laypage = layui.laypage,
					laydate = layui.laydate,
					layedit = layui.layedit,
					common = layui.common,
					tool = layui.tool,
					element = layui.element(),
					dialog = layui.dialog;

				//获取当前iframe的name值
				var iframeObj = $(window.frameElement).attr('name');
				//创建一个编辑器
				var editIndex = layedit.build('LAY_demo_editor', {
					tool: ['strong' //加粗
						, 'italic' //斜体
						, 'underline' //下划线
						, 'del' //删除线
						, '|' //分割线
						, 'left' //左对齐
						, 'center' //居中对齐
						, 'right' //右对齐
						, 'link' //超链接
						, 'unlink' //清除链接
						, 'image' //插入图片
					],
					height: 100
				})
				//全选
				form.on('checkbox(allChoose)', function(data) {
					var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');
					child.each(function(index, item) {
						item.checked = data.elem.checked;
					});
					form.render('checkbox');
				});
				form.render();

				layui.upload({
					url: '上传接口url',
					success: function(res) {
						console.log(res); //上传成功返回值，必须为json格式
					}
				});
			});
		</script>
	</body>
</html>
